import { createApp, createVNode } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import '@/assets/css/common.scss'
import * as ElIcons from '@element-plus/icons-vue'
import { start, close } from '@/utils/nprogress'
import { cleanSession, getToken } from './utils/auth'
import resetForm from './utils/resetForm'
import objCoppy from './utils/objCoppy'
import eleConfirm from './utils/eleConfirm'
import locale from 'element-plus/lib/locale/lang/zh-cn'
import 'virtual:svg-icons-register' // 引入注册脚本
import SvgIcon from '@/components/SvgIcon/index.vue'
import { MotionPlugin } from '@vueuse/motion'
// echarts
import * as echarts from 'echarts'
// 按钮权限
import { permission } from '@/directives/permission'

const app = createApp(App)
const pinia = createPinia()

app.use(router)
app.use(pinia)
app.use(ElementPlus, { locale })
app.use(MotionPlugin)

Object.keys(ElIcons).forEach((key) => {
    app.component(key, ElIcons[key])
})
// 方式二
// const Icon = (props: { icon: string }) => {
//     const { icon } = props
//     return createVNode(ElIcons[icon as keyof typeof ElIcons])
// }
// app.component('Icon', Icon)
// 全局注册icon-svg
app.component('svg-icon', SvgIcon)

app.mount('#app')
app.directive('permission', permission)

// 挂载工具
app.config.globalProperties.$resetForm = resetForm
app.config.globalProperties.$objCoppy = objCoppy
app.config.globalProperties.$eleConfirm = eleConfirm
app.config.globalProperties.$echarts = echarts

//store的使用方式
import { menuStore } from '@/store/menu'
import { userStore } from '@/store/user'

// 权限验证处理:全集守卫路由实现
const whiteList = ['/login', '/install'] //白名单
router.beforeEach(async (to, from, next) => {
    start()
    document.title = <string>import.meta.env.VITE_APP_TITLE
    if (to.meta.title) {
        document.title = document.title + ' — ' + to.meta.title
    }
    const mstore = menuStore()
    const ustore = userStore()
    //获取token
    let token = getToken()
    if (token) {
        if (to.path === '/login' || to.path === '/') {
            next({ path: '/' })
        } else {
            // 获取菜单
            let hasRoles = ustore.permissions && ustore.permissions.length > 0
            if (hasRoles) {
                next()
            } else {
                try {
                    //vuex中不存在权限，从服务器获取
                    await ustore.getInfo()
                    //获取菜单、动态生成路由
                    await mstore.setMenuList(router)
                    //确保动态添加的路由已经被完全加载上去
                    next({ ...to, replace: true })
                } catch (error) {
                    //重置token
                    cleanSession()
                    //跳到登录
                    next({ path: '/login' })
                }
            }
        }
    } else {
        //判断是否在白名单中
        if (whiteList.indexOf(to.path) !== -1) {
            //存在白名单，放行
            next()
        } else {
            //不存在，登录
            next({ path: '/login' })
        }
    }
})

// 路由加载结束后运行
router.afterEach(() => {
    close()
})
